<template>
	<div id="home" class="scroll">
		<!-- 首页内容 -->
		<swipe :banner="banner" :height="'180px'" :width="'100vw'"></swipe>
		<div class="conter">
			<ul>
				<li v-for="(item,index) in list.menu" :key="item.group_data_id">
					<img :src="item.pic" alt="">
					<span>
						{{ item.name }}
					</span>
				</li>
			</ul>

			<div class="home_ad_pic">
				<img :src="home_ad_pic" width="100%">
			</div>
		</div>
		<div class="botom">
			<div class="top_bo">
				<img src="../../assets/recommend.png" width="100%">
				<h3>热门产品</h3>
			</div>
			<!-- 首页商品列表 -->
			<CommodityItem :HomeCommodity="HomeCommodity"></CommodityItem>
			<div class="jiazai">
				<van-loading color="#0094ff">
					加载中.....
				</van-loading>
			</div>
		</div>
	</div>
</template>

<script>
	// <!-- 导入api文件 -->
	import {
		GetIts,
		HomeCommodity
	} from "@/api/home"

	import swipe from '@/components/home/swipe.vue'
	import CommodityItem from '@/components/home/CommodityItem.vue'
	export default {
		components: {
			swipe,
			CommodityItem
		},
		data() {
			return {
				// 轮播图
				banner: [],
				// 首页数据
				list: [],
				// 活动图
				home_ad_pic: '',
				// 首页商品列表
				HomeCommodity: [],
				// 页数
				page: 0,
				isLoading: false, //节流
				containerHeight: 0,
				innerHeight: 0

			}
		},
		methods: {
			// 发送请求
			async getList() {
				this.page++;
				// 首页商品列表
				HomeCommodity(this.page).then(res => {
					// console.log("首页商品列表", res)
					if (res.data.data.list.length) {
						this.HomeCommodity.push(...res.data.data.list)
					}
				})
			},
			// 监听屏幕滚动事件
			handleScroll() {
				// 获取内容高度
				var scrollH = document.documentElement.scrollHeight
				// 获取窗口高度
				var innerH = window.innerHeight
				// 获取滚出去的内容高度
				let top = Math.floor(document.documentElement.scrollTop || document.body.scrollTop);
				// 当内容还剩余200的高度未滚出的时候发送请求
				if (scrollH - top - innerH < 200) {
					// 发送请求
					// setTimeout(() => {
					this.getList();
					// }, 100)
				}
			},
		},
		mounted() {
			window.addEventListener("scroll", this.handleScroll);
		},
		created() {
			GetIts().then(res => {
				// console.log(res)
				this.banner = res.data.data.banner
				this.list = res.data.data
				this.home_ad_pic = res.data.data.ad.home_ad_pic
				// console.log("轮播图1", this.banner)
				// console.log("首页数据1", this.list)
			})
			this.getList()
		},
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#home {
		width: 100vw;

		.conter {
			padding: 10 * $width 10 * $width 0 10 * $width;
			background-color: #f9f9f9;
			margin-top: -10 * $width;

			ul {
				display: flex;
				justify-content: space-between;
				align-items: center;

				li {
					display: flex;
					flex-direction: column;
					align-items: center;

					img {
						width: 40 *$width;
					}

					span {
						font-size: 12 * $width;
						line-height: 28 * $width;
						display: inline-block;
					}
				}

			}

			.home_ad_pic {
				width: 100%;

				padding: 10 * $width 0;
			}
		}

		.botom {
			position: relative;
			width: 100%;

			.top_bo {
				width: 150 * $width;
				height: 20 * $width;
				margin: 15 * $width calc((100vw - 150px) / 2);
				text-align: center;

				h3 {
					position: relative;
					top: -25 * $width;
					font-size: 18 * $width;
					color: #f00;
				}
			}

			.jiazai {
				position: absolute;
				bottom: 70px;
				left: 50%;
				transform: translateX(-50%);
			}
		}

	}
</style>
